<template>
  <div class="box-site" v-if="total > 0">
    <el-row :gutter="10">
      <el-col :xs="12" :sm="8" :md="24 / props.colNumber" v-for="(item, index) in data" :key="index">
        <el-card class="card-site pointer border-radius"
                 shadow="hover"
                 :body-style="bodyStyle"
                 :style="(size - (index + 1) < props.colNumber || data.length - (index + 1) < props.colNumber) && !props.isPage ? 'margin-bottom: 0' : null"
                 @click="push('/site/' + item.id)">
          <el-row style="display: flex;align-items: center">
            <el-col :span="6">
              <Image class="img-sm-size" :lazy="lazy" :alt="item.siteName" :src="item.siteIcon" :size="40" round/>
            </el-col>
            <el-col :span="14">
              <h2 class="fs-14 overflow_omit site-title" v-html="item.siteName"></h2>
              <p class="fs-12 f-gray-color overflow_omit site-details">{{ item.siteDetails }}</p>
            </el-col>
            <el-col class="text-center" :span="4">
              <el-tooltip effect="dark" content="立即前往" placement="right">
                <a class="site-url" target="_blank" :href="'//' + item.siteUrl">
                  <Image class="site-go-img" :lazy="lazy" :alt="item.siteName" :src="ImgRight"/>
                </a>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
        v-if="props.isPage && total > 0"
        small
        background
        layout="prev, pager, next"
        :total="Number(total)"
        class="pagination"
        :page-size="props.size"
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <Empty :description="props.description ? props.description : null" v-else>
    <slot name="empty"/>
  </Empty>
</template>

<script setup lang="ts">
import {Response} from "@/entity/response";
import {Site} from "@/entity/site";
import ImgRight from "@/assets/image/right.svg";
import Empty from "@/components/Empty/Empty.vue";
import Image from "@/components/Image/Image.vue";

const props = defineProps({
  classify: {
    type: String,
    default: ""
  },
  siteName: {
    type: String,
    default: ""
  },
  isPage: {
    type: Boolean,
    default: false
  },
  size: {
    type: Number,
    default: 10
  },
  colNumber: {
    type: Number,
    default: 4
  },
  random: {
    type: Boolean,
    default: false
  },
  description: {
    type: String,
    default: null
  },
  isCollect: {
    type: Boolean,
    default: false
  },
  lazy: {
    type: Boolean,
    default: true
  }
});
const emit = defineEmits(["getListAfter"]);
const router = useRouter();
const site = ref<Site>({
  isCollect: props.isCollect,
  isAudit: false,
});
const data = ref<Site[]>([]);
const total = ref<number>(0);
const pageSize = ref(props.size);
const pageNum = ref(1);
const orderByColumn = ref("");
const isAsc = ref("");
const bodyStyle = {
  padding: "10px"
};
const {siteApi} = useApi();
onMounted(() => {
  if (props.random) {
    getRandomList();
  } else {
    getSiteList();
  }
});
const getSiteList = () => {
  if (props.classify != "") {
    site.value.classifyId = props.classify;
  }
  if (props.siteName != "") {
    site.value.siteName = props.siteName;
  }
  siteApi.getList({
    pageSize: pageSize.value,
    pageNum: pageNum.value,
    orderByColumn: orderByColumn.value,
    isAsc: isAsc.value
  }, {
    ...site.value
  }).then((res: any) => {
    const {rows, total: sum}: Response = res;
    data.value = rows || [];
    total.value = sum || 0;
    emit("getListAfter", sum);
  });
}
const getRandomList = () => {
  if (props.classify != "") {
    siteApi.getRandom(props.size, props.classify).then((res: any) => {
      const {data: list}: Response = res;
      data.value = list || [];
      total.value = list.length || 0;
    });
  }
}
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getSiteList();
}
const handleCurrentChange = (val: number) => {
  pageNum.value = val;
  getSiteList();
}
const push = (path: string) => {
  router.push(path);
}
defineExpose({
  data,
  getSiteList,
  site,
  isAsc,
  orderByColumn,
});
</script>

<style scoped lang="scss">
.box-site {
  width: 100%;

  .card-site {
    width: 100%;
    margin-bottom: 10px;

    .site-title {
      height: 16px;
      margin-bottom: 5px;
    }

    .site-details {
      height: 14px;
    }

    .site-go-img, .site-url {
      display: inline-block;
      width: 22px;
      height: 22px;
    }
  }

  .pagination {
    justify-content: center;
  }
}
</style>